import React, { Component } from 'react';
import { Table, DatePicker, Form, Button } from 'antd';
import { connect } from 'dva';
import { routerRedux } from 'dva/router';
import moment from 'moment';
import locale from 'antd/lib/date-picker/locale/zh_CN'
import styles from './HistoryData.css';
const Item = Form.Item;
const { RangePicker } = DatePicker
class History extends Component {
  render(){
    const { form: {
      getFieldDecorator,
      validateFieldsAndScroll
    }} = this.props;
    const { historyData, dispatch } = this.props;
    const { loading, records } = historyData;
    console.log(records)
    const stockholdsColumns = [{
      title : "股票代码",
      dataIndex : "code",
      align : "center",
      key : "code",
    }, {
      title : "股票名称",
      dataIndex : "name",
      align : "center",
      key : "name",
    }, {
      title : "发生手数",
      dataIndex : "num",
      align : "center",
      key : "num",
    }, {
      title : "发生金额",
      dataIndex : "money",
      align : "center",
      key : "money",
    }, {
      title : "操作时间",
      dataIndex : "time",
      align : "center",
      key : "time",
    }, {
      title : "标志",
      dataIndex : "manual",
      align : "center",
      key : "manual"
    }];
    return (
      <div className={ styles.wrapper }>
        <div className={ styles.header }>
          <span>历史记录</span>
        </div>
        <div className={ styles.content }>
          <Form layout="inline">
            <Item label="选择查看范围">
              {
                getFieldDecorator("range", {
                  rules: [
                    {
                      required : true,
                      message : "时间范围不能为空"
                    }
                  ]
                })(<RangePicker locale={locale}/>)
              }
            </Item>
            <Item>
              <Button
                type='primary'
                loading={loading}
                onClick={()=>{
                  validateFieldsAndScroll((err, values)=>{
                    if(!err){
                      const { range } = values;
                      let begin = moment(range[0]).format("YYYYMMDD");
                      let end = moment(range[1]).format("YYYYMMDD");
                      dispatch(routerRedux.replace({
                        pathname : "/history",
                        search : `datebegin=${begin}&dateend=${end}`
                      }))
                    }
                  })
                }}
              >查询</Button>
            </Item>
          </Form>
          <Table
            columns={stockholdsColumns}
            dataSource={records}
            loading={loading}
            bordered
            rowKey={(record)=>record.code}
          />
        </div>
      </div>
    )
  }
}

export default connect(({ historyData }) => ({ historyData }))(Form.create()(History))